<template>
  <div id="AdvBox">
    <el-card>
      <el-card shadow="never">
        <div slot="header"  class="clearfix" v-if="crud.props.searchToggle">
          <!-- 搜索 -->
          <el-select v-model="query.channel_id" placeholder="请选择频道" style="width: 130px;">
            <el-option  v-for="(item, index) in channelInfo" :label="item.channel_name" :value="item.id"  :key="index" ></el-option>
          </el-select>
          <el-select v-model="query.time_status" placeholder="请选择有效期" style="width: 130px;">
            <el-option label="全部" value="1">全部</el-option>
            <el-option label="当前有效" value="2">当前有效</el-option>
            <el-option label="已经失效" value="3">已经失效</el-option>
          </el-select>
          <el-input v-model="query.adv_seg_name" clearable placeholder="输入广告时段名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <rrOperation />
        </div>
        <crudOperation :permission="permission" />
        <!--表单组件-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
          <el-form ref="form" inline :model="form" :rules="rules" label-width="120px">
            <el-form-item label="节目时段名称" prop="adv_seg_name">
              <el-input v-model="form.adv_seg_name" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="频道类型" prop="channel_id">
              <el-select v-model="form.channel_id" class="elInputS" placeholder="请选择频道">
                <el-option  v-for="(item, index) in channelInfo" :label="item.channel_name" :value="item.id"  :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="节目开始时间" prop="s_time">
              <el-time-picker v-model="form.s_time" format = 'HH:mm:ss' value-format = 'HH:mm:ss' style="width: 300px;"></el-time-picker>
            </el-form-item>
            <el-form-item label="节目长度" prop="pgm_len">
              <el-time-picker v-model="form.pgm_len" format = 'HH:mm:ss' value-format = 'HH:mm:ss' style="width: 300px;"></el-time-picker>
            </el-form-item>
            <el-form-item label="周几可用" prop="week_use" id="weeks">
              <el-col :span="3" style="min-width: 330px;">
                <el-checkbox-group v-model="form.week_use" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in weeks_item" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              </el-col>
            </el-form-item>
            <el-form-item label="有效时间" prop="date_limit">
              <el-checkbox v-model="form.date_limit_s" @change="TimeStatusChange">有效时间</el-checkbox>
            </el-form-item>
            <el-form-item label="起始时间">
              <el-date-picker v-model="form.s_date" style="width: 150px;" :disabled="form.time_status" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart" @change="changeStart"></el-date-picker>
              <el-date-picker v-model="form.e_date" style="width: 150px;" :disabled="form.time_status" type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" @change="changeEnd"></el-date-picker>
            </el-form-item>
            <el-form-item label="权限控制" prop="rights_limit">
              <el-checkbox v-model="form.rights_limit_s" @change="RightStatusChange">权限控制</el-checkbox>
            </el-form-item>
            <el-form-item label="选择管理人员" prop="oper_users">
              <el-cascader
                  v-model="form.oper_users"
                  id="right_status"
                  :options="userList"
                  :disabled="form.rights_status"
                  :props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'id', label: 'truename' }"
                  clearable
                  style="width: 100%;">
              </el-cascader>
            </el-form-item>
            <el-form-item label="广告系统时段ID" prop="adv_segid">
              <el-input v-model="form.adv_segid" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" style="width: 300px;" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>

        <!-- 列表区域 -->
        <el-table
          ref="table"
          v-loading="crud.loading"
          lazy
          :data="crud.data"
          border
          stripe
          @select="crud.selectChange"
          @select-all="crud.selectAllChange"
          @selection-change="crud.selectionChangeHandler"
          style="width: 100%;">
          <el-table-column :selectable="checkboxT" type="selection" width="55" />
          <el-table-column
            label="序号"
            type="index"
            width="60">
          </el-table-column>
          <!-- <el-table-column type="index" label="序号"></el-table-column> -->
          <el-table-column prop="adv_seg_name" label="广告时段名称"></el-table-column>
          <el-table-column prop="channel_name" label="所属频道"></el-table-column>
          <el-table-column prop="s_time" label="开始时间"></el-table-column>
          <el-table-column prop="pgm_len" label="时段长度"></el-table-column>
          <el-table-column prop="week_attr" label="周几可用"></el-table-column>
          <el-table-column prop="s_date" label="有效日期" :formatter="state"></el-table-column>
          <el-table-column v-permission="['admin','advseq:edit','advseq:del']" label="操作" width="130px" align="center" fixed="right">
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
                :disabled-dle="scope.row.pgm_seq_id === 0"
                msg="确定删除吗,此操作不能撤销！"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-card>
    </el-card>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@/components/Crud/crud'
import crudAdvseq from '@/api/program/advseq.js' // 引入当前栏目的后端api

// 引入已封装好的增删改查相关组件
import rrOperation from '@/components/Crud/RrOperation.vue' // 搜索查询组件
import crudOperation from '@/components/Crud/CrudOperation.vue' // 列表顶部功能区域组件
import pagination from '@/components/Crud/Pagination.vue' // 分页组件
import udOperation from '@/components/Crud/UD.operation' // 列表操作列组件

// 配置表单字段， 并设置字段初始值
const defaultForm = {
  adv_seq_id: null,
  adv_seg_name: null,
  channel_name: '暂无',
  week_use: [],
  date_limit: false,
  date_limit_s: false,
  time_status: true,
  s_date: '',
  e_date: '',
  s_time: new Date(2020, 2, 0, 8, 0),
  pgm_len: new Date(2020, 2, 0, 8, 0),
  rights_limit: false,
  rights_limit_s: false,
  rights_status: true,
  oper_users: null,
  remark: null,
  adv_segid: null,
  oper_users_arr: []
}
export default {
  name: 'Advseq',
  components: { rrOperation, crudOperation, pagination, udOperation },
  cruds() { // 该方法，返回当前组件配置初始化后的实例对象
    return CRUD({ idField: 'adv_seq_id', title: '广告时段设置', url: 'program/advseq', crudMethod: { ...crudAdvseq } })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      /* 设置页面权限 */
      permission: {
        add: ['admin', 'advseq::add'],
        edit: ['admin', 'advseq::edit'],
        del: ['admin', 'advseq::del']
      },
      week_use: [],
      weeks_item: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // 表单验证规则
      rules: {},
      // 频道详情配置数组
      channelInfo: [],
      isIndeterminate: false,
      checkAll: false,
      pickerOptionsStart: {},
      pickerOptionsEnd: {},
      time_status: true,
      userList: [], // 用户列表
      right_status: true
    }
  },

  created() {
    this.crud.optShow.download = false // 隐藏 导出按钮
    this.getChannelList()
    this.getUserList()
  },
  methods: {
    checkboxT(row, rowIndex) {
      return row.id !== false
    },
    // 判断有效日期
    state(row, column) {
      if (row.date_limit === 2) {
        return row.s_date + ' ~ ' + row.e_date
      } else {
        return '一直有效'
      }
    },
    // 新增与编辑提交前的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      console.log(form, 'beforSubmit')
    },
    async getChannelList() {
      const { data: res } = await this.$http.get('Program/getChannelList', {
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取频道列表失败！')
      }
      this.channelInfo = res.data.list
    },
    async getUserList() {
      const { data: res } = await this.$http.get('users', {
        params: { pagenum: 1, pagesize: 30, ordername: '' }
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      this.userList = res.data.users
    },
    // 全选
    handleCheckAllChange() {
      this.form.week_use = this.checkAll ? this.weeks_item : []
    },
    handleCheckedCitiesChange(value) {
      console.log(value)
      const checkedCount = value.length
      this.checkAll = checkedCount === this.weeks_item.length
      this.form.week_use = value
    },
    // 有效时间变化
    TimeStatusChange() {
      this.form.time_status = this.form.date_limit
      this.form.date_limit = !this.form.time_status
    },
    changeStart() { // 限制开始时间
      this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
        disabledDate: (time) => {
          if (this.form.s_date) {
            return time.getTime() < this.form.s_date
          }
        }
      })
    },
    changeEnd() { // 限制结束时间
      this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
        disabledDate: (time) => {
          if (this.form.e_date) {
            return time.getTime() > this.form.e_date
          }
        }
      })
    },
    // 管理人员权限控制
    RightStatusChange() {
      this.form.rights_status = !this.form.rights_limit_s
      this.form.rights_limit_s = !this.form.rights_status
    }
  }
}
</script>

<style lang="less">
  #AdvBox .el-card__header {
    background-color: #fff;
  }
  .operator {
    float: right;
    display: inline-block;
    margin-left: 20px;
  }
  #weeks .el-form-item__content{
    width: 330px;
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 10px !important;
  }
  #right_status{
    width: 300px !important;
  }
</style>
